<script setup>
import {computed, ref} from "vue";
import {route} from 'ziggy-js'
import {menus} from "./menu.js";
import createRouteMap from "@/composables/createRouteMap.js";

import MajorMenu from "./menu/MajorMenu.vue";
import MinorMenu from "./menu/MinorMenu.vue";

const {routeMap, parentMap} = createRouteMap( menus ?? [] );

const classic = ref(true)

const currentMenu = computed(() => routeMap.get( route().current()));
const activeMainMenu = computed(() => parentMap.get(currentMenu.value?.name) ?? currentMenu.value);
const isMultiMenu = computed(() => activeMainMenu.value?.children?.length > 0);
console.log(currentMenu.value, activeMainMenu.value);
</script>

<template>
    <aside v-if="classic" :class="{'w-[240px]': isMultiMenu, 'w-[80px]': !isMultiMenu }"  class="aside-bg h-full flex flex-col transition-all duration-300 ease-in-out">
        <div class="flex-1 flex duration-300 ease-in-out">
            <div class="w-[80px] h-full flex flex-col items-center">
                <a-scrollbar :style="{ height: 'calc(100vh - 80px)' }" class="overflow-auto bg-unset">
                    <MajorMenu :active="activeMainMenu?.name" :items="menus" />
                </a-scrollbar>
            </div>
            <div v-if="isMultiMenu" class=" flex flex-col flex-1 overflow-x-hidden duration-300 ease-in-out">
                <a-scrollbar :style="{ height: 'calc(100vh - 72px)' }" class="overflow-auto">
                    <MinorMenu :items="activeMainMenu.children ?? []"  />
                </a-scrollbar>
            </div>
        </div>
    </aside>
    <aside v-else class="w-[200px] aside-bg h-full flex flex-col transition-all duration-300 ease-in-out">
        <div class="flex-1 flex duration-300 ease-in-out">
            <div  class="flex flex-col flex-1 overflow-x-hidden duration-300 ease-in-out">
                <a-scrollbar :style="{ height: 'calc(100vh - 72px)' }" class="overflow-auto">
                    <MinorMenu :items="menus ?? []"  />
                </a-scrollbar>
            </div>
        </div>
    </aside>
</template>

<style lang="scss" scoped>
.aside-bg{
    border-radius: 4px;
    :deep(.arco-scrollbar){
        width: 100%;
        height: 100%;
    }
    font-family: var(--font-mono),
    'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    /* 美化滚动条 */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-thumb {
        width: 8px;
        border-radius: 8px;
        background-color: var(--color-neutral-5);
    }

    ::-webkit-scrollbar-thumb:hover {
        width: 8px;
        background-color: var(--color-neutral-4);
    }
}
</style>
